<script setup>
import {
  HomeFilled,
  Menu as IconMenu,
  Key,
  List,
  Location,
  OfficeBuilding,
  UploadFilled,
  User,
  WindPower,
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import axios from 'axios'
import { onMounted, ref } from 'vue'
const tableData = ref([])
onMounted(()=>{
  getList()
})

const getList=async ()=>{
 const res= await axios.get('/adminapi/rights')
  tableData.value=res.data
  // console.log(tableData.value)
}

// 图标映射
const mapIcons={
  User:User,
  WindPower,
   IconMenu,
  Location,
  HomeFilled,
  List,
  Key,
  OfficeBuilding,
  UploadFilled,
}

// 更新 传递id
const handleUpdate = (item)=>{
  currentItem.value=item
console.log(currentItem.value)
updataForm.value.title=item.title
centerDialogVisible.value=true
}

// 更新对话框
const centerDialogVisible = ref(false)
const currentItem=ref({})
const updateFromRef=ref()
const updataForm=ref({
  title:''
})
const rules=({
  title:[{
    required:true,
    message:'请输入权限名称',
    trigger:'blur'
  }]
})

const handleConfirm=()=>{
  // 进行校验
  updateFromRef.value.validate(async (valid)=>{
    if(valid){
   // 输入成功
    // 发送请求
     await axios.put(`/adminapi/rights/${currentItem.value.id}`,updataForm.value)
    // console.log(res)
   ElMessage.success('更新成功')
   
    // 刷新列表
    getList()

  // 关闭对话框
  centerDialogVisible.value=false
    }else{
      ElMessage.error('请检查名称')
    }
  })


}

// 删除
const handleRemove=async (item)=>{
  const res= await axios.delete(`/adminapi/rights/${item.id}`)
  // 提示消息删除成功
  console.log(res)
  ElMessage.success('删除成功')
  // 重新渲染
  getList()


}
</script>

<template>
  <el-table  row-key="id"  stripe :data="tableData" style="width: 100%">
    <el-table-column prop="title" label="权限名称" width="280" />
    <!-- <el-table-column prop="icon" label="图标" width="180" /> -->
     <!-- 自定义 -->
    <el-table-column label="图标" width="280">
      <template #default="scope">
        <div style="display: flex; align-items: center">
          <el-icon size="20">
            <!-- {{scope.row.icon}} -->
             <!-- 动态组件 -->
              <component :is="mapIcons[scope.row.icon]"></component>
          </el-icon>
        </div>
      </template>
    </el-table-column>
    
    <el-table-column label="操作" >
      <template #default="scope">
        <el-button style="margin-right: 5px;" size="large" round type="primary" color="#626aef" @click="handleUpdate(scope.row)">
          更新
        </el-button>
        <el-popconfirm title="你确定要删除吗?"
         @confirm="handleRemove(scope.row)"
         confirm-button-text="确定"
          cancel-button-text="取消"
          confirm-button-type="warning"
          cancel-button-type="info"
         >
          <template #reference>
      <el-button size="large"  round type="danger" >删除</el-button>
    </template>
  </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog
    v-model="centerDialogVisible"
    title="更新权限"
    style="height: 220px;"
    width="500"
    align-center
  >
  <el-form
    ref="updateFromRef"
    style="max-width: 600px;margin-top: 20px;"
    :model="updataForm"
    status-icon
    :rules="rules"
    label-width="80"
    class="demo-ruleForm"
  >
    <el-form-item label="权限名称" prop="title">
      <el-input 
      v-model="updataForm.title"
       type="text" 
        />
    </el-form-item>
  </el-form>


    <template #footer >
      <div class="dialog-footer" style="margin-top: 30px;">
        <el-button type="primary" @click="handleConfirm()">
          确定
        </el-button>
        <el-button @click="centerDialogVisible = false">取消</el-button>
       
      </div>
    </template>
  </el-dialog>
</template>

<style scoped></style>
